<main class="main full-width" xmlns:th="http://www.thymeleaf.org">
  <article class="has-image main-article">
    <header class=article-header>
      <div class=article-image th:if="${theme.config.basic.enableRandomImg and (! #strings.isEmpty(theme.config.basic.postRandomImg) or ! #strings.isEmpty(post.spec.cover)) or (!theme.config.basic.enableRandomImg and ! #strings.isEmpty(post.spec.cover))}">
        <a th:href="${post.status.permalink}">
          <th:block th:if="${theme.config.basic.lazyLoading}">
          <img th:data-src="${#strings.isEmpty(post.spec.cover) ? (theme.config.basic.enableRandomImg ? theme.config.basic.postRandomImg : '') : post.spec.cover}"
               th:src="${theme.config.basic.lazyUrl}" class="lazyLoading"
               width=800 height=450 loading=lazy th:alt="${post.spec.title}">
          </th:block>
          <th:block th:if="not ${theme.config.basic.lazyLoading}">
            <img th:src="${#strings.isEmpty(post.spec.cover) ? (theme.config.basic.enableRandomImg ? theme.config.basic.postRandomImg : '') : post.spec.cover}"
                 width=800 height=450 loading=lazy th:alt="${post.spec.title}">
          </th:block>
        </a>
      </div>
      <div class=article-details>
        <th:block th:if="${not #lists.isEmpty(post.categories)}">
        <header class=article-category th:with="category = ${post.categories[0]}">
          <a th:href="@{${category.status.permalink}}"
             th:text="${category.spec.displayName}">
          </a>
        </header>
        </th:block>
        <div class=article-title-wrapper>
          <h2 class=article-title>
            <a th:href="${post.status.permalink}"
            th:text="${post.spec.title}">

            </a>
          </h2>
        </div>
        <footer class=article-time>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time"
                 width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                 fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" />
              <path d="M11.795 21H5a2 2 0 01-2-2V7a2 2 0 012-2h12a2 2 0 012 2v4" />
              <circle cx="18" cy="18" r="4" />
              <path d="M15 3v4" />
              <path d="M7 3v4" />
              <path d="M3 11h16" />
              <path d="M18 16.496V18l1 1" />
            </svg>
            <time class=article-time--published th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">

            </time>
          </div>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock"
                 width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                 fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" />
              <circle cx="12" cy="12" r="9" />
              <polyline points="12 7 12 12 15 15" />
            </svg>
            <time class=article-time--reading id="article-time--reading" th:with="wordCount = ${#strings.length(post.content.content)}">
              <th:block th:if="${wordCount / 400 lt 1}">
              阅读时长: 1 分钟
              </th:block>
              <th:block th:if="${wordCount / 400 ge 1}">
                阅读时长: [[${wordCount / 400}]] 分钟
              </th:block>
            </time>
          </div>
        </footer>
      </div>
    </header>
    <section class=article-content id="article-content" th:utext="${post.content.content}">


      <hr />
    </section>

    <footer class=article-footer>
      <section class=article-tags >
        <a th:each="tag : ${post.tags}"
           th:href="@{${tag.status.permalink}}"
           th:text="${tag.spec.displayName}">

        </a>
      </section>
      <section class=article-copyright>
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright"
             width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
             fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" />
          <circle cx="12" cy="12" r="9" />
          <path d="M14.5 9a3.5 4 0 100 6" />
        </svg>
        <span th:text="${theme.config.article.article_copyright}">
                Licensed under CC BY-NC-SA 4.0
              </span>
      </section>
    </footer>
  </article>
  <th:block th:if="${not #lists.isEmpty(post.categories)}">
  <aside class=related-content--wrapper>
    <h2 class=section-title>
      相关文章
    </h2>
    <div class=related-content>
      <div class="flex article-list--tile" th:each="recommendPosts : ${post.categories[0]}"
           th:with="recommendPosts = ${postFinder.listByCategory(1,5,recommendPosts.metadata.name)}">
        <article class=has-image th:each="recommendPost : ${recommendPosts.items}">
          <a th:href="@{${recommendPost.status.permalink}}">
            <div class=article-image>
              <th:block th:if="${theme.config.basic.lazyLoading}">
              <img th:data-src="${#strings.isEmpty(recommendPost.spec.cover) ? theme.config.basic.postRandomImg+'?pageid='+recommendPost.metadata.name : recommendPost.spec.cover}"
                   th:src="${theme.config.basic.lazyUrl}" class="lazyLoading"
                   width=250 height=150 loading=lazy th:alt="${recommendPost.spec.title}"
                   >
              </th:block>
              <th:block th:if="not ${theme.config.basic.lazyLoading}">
                <img th:src="${#strings.isEmpty(recommendPost.spec.cover) ? theme.config.basic.postRandomImg+'?pageid='+recommendPost.metadata.name : recommendPost.spec.cover}"
                     width=250 height=150 loading=lazy th:alt="${recommendPost.spec.title}"
                >
              </th:block>
            </div>
            <div class=article-details>
              <h2 class=article-title>
                [[${recommendPost.spec.title}]]
              </h2>
            </div>
          </a>
        </article>
      </div>
    </div>
  </aside>
  </th:block>

  <th:block th:replace="~{modules/widgets/article-comment :: ${theme.config.article.articleComment}}" />

<!--  底部信息-->
  <th:block th:replace="~{modules/footer}" />

</main>